<template>
  <div id="home" class="main-box">
    <!-- 轮播banner -->
    <el-carousel indicator-position="outside" :autoplay="true">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <el-image
          fit="cover"
          :src="yunUrl + item.url"
          @click="goDetail(item.id)"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
    <!-- 内容板块 -->
    <div class="content-1">
      <div class="content-title">
        <div class="title-left">
          <div></div>
          <div>科技板块</div>
        </div>
        <div class="title-right">
          <span>更多视频</span><i class="el-icon-caret-right"></i>
        </div>
      </div>
      <div class="content-main content-main1">
        <div class="content-item" v-for="(item, index) in techArr" :key="index">
          <div class="item-top" @click="goDetail(item.id)">
            <el-image :src="item.cover"></el-image>
            <!-- 封面蒙版 -->
            <div class="masking-img"></div>
            <div class="float-box">
              <span>{{ item.view }}人正在观看</span>
            </div>
            <div class="play-button" ref="playRef1">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
          <div class="item-bottom">
            <div class="item-desc common_ellipsis1">
              {{ item.desc }}
            </div>
            <div class="item-author">
              <i class="el-icon-user-solid"></i><span>{{ item.author }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner -->
    <div class="banner-1">
      <el-image
        src="http://ru6iw5134.hd-bkt.clouddn.com/img/banner1.png"
      ></el-image>
    </div>
    <div class="content-1">
      <div class="content-title">
        <div class="title-left">
          <div></div>
          <div>美景板块</div>
        </div>
        <div class="title-right">
          <span>更多视频</span><i class="el-icon-caret-right"></i>
        </div>
      </div>
      <div class="content-main">
        <div
          class="content-item"
          v-for="(item, index) in sceneryArr"
          :key="index"
        >
          <div class="item-top" @click="goDetail(item.id)">
            <el-image :src="item.cover"></el-image>
            <!-- 封面蒙版 -->
            <div class="masking-img"></div>
            <div class="float-box">
              <span>{{ item.view }}人正在观看</span>
            </div>
            <div class="play-button" ref="playRef2">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
          <div class="item-bottom">
            <div class="item-desc common_ellipsis1">
              {{ item.desc }}
            </div>
            <div class="item-author">
              <i class="el-icon-user-solid"></i><span>{{ item.author }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 心动板块 -->
    <div class="content-1 content-2">
      <div class="content-title">
        <div class="title-left">
          <div></div>
          <div>心动板块</div>
        </div>
        <div class="title-right">
          <span>更多视频</span><i class="el-icon-caret-right"></i>
        </div>
      </div>
      <div class="outer-main">
        <div class="content-main content-main1">
          <div
            class="content-item"
            v-for="(item, index) in beautyArr"
            :key="index"
          >
            <div class="item-top" @click="goDetail(item.id)">
              <el-image :src="item.cover"></el-image>
              <!-- 封面蒙版 -->
              <div class="masking-img"></div>
              <div class="float-box">
                <span>{{ item.view }}人正在观看</span>
              </div>
              <div class="play-button">
                <i class="el-icon-video-play"></i>
              </div>
            </div>
            <div class="item-bottom">
              <div class="item-desc common_ellipsis1">
                {{ item.desc }}
              </div>
              <div class="item-author">
                <i class="el-icon-user-solid"></i><span>{{ item.author }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content-main2">
          <div class="main2-item" @click="goDetail()">
            <el-image
              src="http://ru6iw5134.hd-bkt.clouddn.com/img/ycy.jpg"
            ></el-image>
            <!-- 封面蒙版 -->
            <div class="masking-img"></div>
            <div class="play-button">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- banner -->
    <div class="banner-1">
      <el-image
        src="http://ru6iw5134.hd-bkt.clouddn.com/img/banner2.png"
      ></el-image>
    </div>
    <!-- 影视模块 -->
    <div class="content-1">
      <div class="content-title">
        <div class="title-left">
          <div></div>
          <div>影视模块</div>
        </div>
        <div class="title-right">
          <span>更多视频</span><i class="el-icon-caret-right"></i>
        </div>
      </div>
      <div class="content-main">
        <div
          class="content-item"
          v-for="(item, index) in moviesArr"
          :key="index"
        >
          <div class="item-top" @click="goDetail(item.id)">
            <el-image :src="item.cover"></el-image>
            <!-- 封面蒙版 -->
            <div class="masking-img"></div>
            <div class="float-box">
              <span>{{ item.view }}人正在观看</span>
            </div>
            <div class="play-button" ref="playRef2">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
          <div class="item-bottom">
            <div class="item-desc common_ellipsis1">
              {{ item.desc }}
            </div>
            <div class="item-author">
              <i class="el-icon-user-solid"></i><span>{{ item.author }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 生活模块 -->
    <div class="content-1 content-2">
      <div class="content-title">
        <div class="title-left">
          <div></div>
          <div>生活模块</div>
        </div>
        <div class="title-right">
          <span>更多视频</span><i class="el-icon-caret-right"></i>
        </div>
      </div>
      <div class="outer-main">
        <div class="content-main content-main1">
          <div
            class="content-item"
            v-for="(item, index) in lifeArr"
            :key="index"
          >
            <div class="item-top" @click="goDetail(item.id)">
              <el-image :src="item.cover"></el-image>
              <!-- 封面蒙版 -->
              <div class="masking-img"></div>
              <div class="float-box">
                <span>{{ item.view }}人正在观看</span>
              </div>
              <div class="play-button">
                <i class="el-icon-video-play"></i>
              </div>
            </div>
            <div class="item-bottom">
              <div class="item-desc common_ellipsis1">
                {{ item.desc }}
              </div>
              <div class="item-author">
                <i class="el-icon-user-solid"></i><span>{{ item.author }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content-main2">
          <div class="main2-item" @click="goDetail()">
            <el-image
              src="http://ru6iw5134.hd-bkt.clouddn.com/img/ycy.jpg"
            ></el-image>
            <!-- 封面蒙版 -->
            <div class="masking-img"></div>
            <div class="play-button">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/global.css";
export default {
  name: "homePage",
  components: {},
  data() {
    return {
      yunUrl: "http://ru6iw5134.hd-bkt.clouddn.com",
      bannerList: [
        { id: 100, value: "科技", url: "/img/banner_1.png" },
        { id: 200, value: "美景", url: "/img/banner_2.png" },
        { id: 300, value: "心动", url: "/img/banner_3_1.png" },
        { id: 400, value: "影视", url: "/img/banner_4.png" },
        { id: 500, value: "生活", url: "/img/banner_5.png" },
      ],
      resList: {},
      techArr: [],
      sceneryArr: [],
      beautyArr: [],
      moviesArr: [],
      lifeArr: [],
    };
  },
  methods: {
    goDetail(id) {
      this.$router.push(`/detail?id=${id}`);
    },
    getList() {
      this.$http.get("/api/data").then((res) => {
        this.resList = res.data.list;
        this.techArr = this.resList.techArr;
        this.sceneryArr = this.resList.sceneryArr;
        this.beautyArr = this.resList.beautyArr.splice(0,6);
        this.moviesArr = this.resList.moviesArr;
        this.lifeArr = this.resList.lifeArr.splice(0,6);;
        console.log(this.resList);
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
#home {
  .el-image {
    width: 100%;
    height: 100%;
  }
  .content-1 {
    .content-title {
      display: flex;
      justify-content: space-between;
      height: 20px;
      .title-left {
        display: flex;
        > div:first-child {
          width: 6px;
          height: 100%;
          background-color: #74c6b3;
        }
        > div:last-child {
          font-size: 20px;
          margin-left: 10px;
        }
      }
      .title-right {
        font-size: 14px;
        color: #74c6b3;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .content-main {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // border: 1px solid pink;
      .content-item {
        width: 280px;
        height: 225px;
        // border: 1px solid #74c6b3;
        margin-bottom: 20px;
        cursor: pointer;
        .item-top {
          height: 163px;
          // border: 1px solid yellowgreen;
          position: relative;
          border-radius: 4px;
          // 图片蒙版
          .masking-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(
              0,
              0,
              0,
              0.5
            ); /* 这里的颜色可以根据需要进行调整 */
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
          }
          &:hover .masking-img {
            opacity: 1;
          }
          &:hover .play-button {
            display: block;
          }
          .float-box {
            width: 100%;
            height: 33px;
            line-height: 33px;
            text-align: left;
            font-size: 12px;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.2);
            position: absolute;
            left: 0;
            bottom: 0;
            > span {
              margin-left: 10px;
            }
          }
          .play-button {
            position: absolute;
            width: 45px;
            height: 45px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: none;
            i {
              font-size: 45px;
              color: #74c6b3;
            }
          }
        }
        .item-bottom {
          background: #f8f8f8;
          box-shadow: 0 2px 3px 3px rgba(111, 111, 111, 0.07);
          border-radius: 4px;
          height: 62px;
          // margin-top: 10px;
          .item-desc {
            text-align: left;
            // height: 18px;
            line-height: 18px;
            font-size: 14px;
            color: #333333;
            padding: 10px;
            box-sizing: border-box;
            &:hover {
              color: #74c6b3;
            }
          }
          .item-author {
            font-size: 12px;
            color: #999;
            padding-left: 10px;
            &:hover {
              color: #74c6b3;
            }
            > span {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .content-2 {
    .outer-main {
      display: flex;
      .content-main1 {
        width: 75%;
        // border: 1px solid pink;
      }
      .content-main2 {
        width: 23%;
        margin-left: 2%;
        margin-top: 20px;
        // border: 1px solid yellowgreen;
        .main2-item {
          margin-bottom: 20px;
          position: relative;
          cursor: pointer;
          // 图片蒙版
          .masking-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(
              0,
              0,
              0,
              0.5
            ); /* 这里的颜色可以根据需要进行调整 */
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
          }
          &:hover .masking-img {
            opacity: 1;
          }
          &:hover .play-button {
            display: block;
          }
          .play-button {
            position: absolute;
            width: 45px;
            height: 45px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: none;
            i {
              font-size: 45px;
              color: #74c6b3;
            }
          }
        }
      }
    }
  }
  .banner-1 {
    height: 186px;
    // border: 1px solid #74c6b3;
    margin-bottom: 20px;
  }
}
</style>